<template>
  <div class="item_box">
    <div class="mt20">
      <el-form :model="queryParams" ref="queryRef" label-position="right" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="创建机构" prop="branchId">
              <el-select
                v-model="queryParams.branchId"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in branchOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总部管理处室" prop="section">
              <el-select
                v-model="queryParams.section"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in branchOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span class="title_2">商机列表</span>
      <el-table
        v-loading="loading"
        :data="list_0"
      >
        <el-table-column type="selection" width="55" align="left" />
        <el-table-column label="商机号" align="center" prop="boNo" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="商机名称" align="center" prop="name" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="预计保费(万元)" align="center" prop="estimatedPremium" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="预计总保费" align="center" prop="estimatedAllPremium" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="目标保费" align="center" prop="targetPremium" :show-overflow-tooltip="true"/>
        <el-table-column label="预计报价/谈判日期" align="center" prop="estimatedQuotation" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column label="业务渠道" align="center" prop="businessChannel" :show-overflow-tooltip="true"/>
        <el-table-column label="商机状态" align="center" prop="status" :show-overflow-tooltip="true"/>
        <el-table-column label="中标保费(万元)" align="center" prop="bidPremium" min-width="120" :show-overflow-tooltip="true"/>
        <el-table-column label="保单保费" align="center" prop="policyPremium" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" @click="handle(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup name="marketingInsight">
import { nextTick, reactive, ref, toRefs } from "vue"


  const list_0 = ref([])
  const loading = ref(false)
  const total = ref(0)
  const activeName = ref('1')
  const queryRef = ref(null)
  const branchOptions = ref([
    { label: '全部', value: '' },
  ])

  const data = reactive({
    queryParams: {
      section: '',
      branchId: '',
      affiliation: [],
      pageNum: 1,
      pageSize: 10,
    },
  })

  const { queryParams } = toRefs(data)
  const handleClick = (tab) => {
    getList()
  }
  const getList = () => {
    loading.value = true
    setTimeout(() => {
      list_0.value = [
        {
          boNo: '202401010001',
          name: '中国建筑工程有限公司团险',
          estimatedPremium: '8,000',
          estimatedAllPremium: '10,000',
          targetPremium: '7,000',
          estimatedQuotation: '2024-06-06',
          businessChannel: '经纪',
          bidPremium: '8,000',
          status: '潜在商机',
          policyPremium: '8,100',
        },
        {
          boNo: '202401010002',
          name: '中国建筑工程有限公司团险',
          estimatedPremium: '10,000',
          estimatedAllPremium: '10,000',
          targetPremium: '9,000',
          estimatedQuotation: '2024-06-06',
          businessChannel: '直接',
          bidPremium: '9,000',
          status: '立项审批',
          policyPremium: '9,100',
        },
        {
          boNo: '202401010003',
          name: '中国建筑工程有限公司团险',
          estimatedPremium: '5,000',
          estimatedAllPremium: '6,000',
          targetPremium: '5,000',
          estimatedQuotation: '2024-06-06',
          businessChannel: '代理',
          bidPremium: '6,000',
          status: '商机跟进',
          policyPremium: '6,100',
        },
      ]
      total.value = list_0.value.length
      loading.value = false
    }, 500);
  }
  const handle = (val) => {

  }
  const exportList = () => {
    
  }
  getList()
</script>
<style lang="scss" scoped>
</style>
